{template 'mroles/header'}
<link rel="stylesheet" href="../addons/mx_shop/resources/mroles_web/css/pagination/pagination.css">
<script src="../addons/mx_shop/resources/mroles_web/js/plugins/cascade/cascade.js"></script>
<script src="../addons/mx_shop/resources/mroles_web/js/plugins/pagination/jquery.pagination.js"></script>
<style>
    select,input{outline: none;}
    .ibox-title{border-color: transparent;}
    .ibox-title select{
        width: 130px;
        height: 32px;
        line-height: 28px;
        color: #666;
        border: 1px solid #ccc;
    }
    .ibox-title .search input{
        width: 165px;
        border: 1px solid #ccc;
        color: #333;
        /*line-height: 28px;*/
        height: 32px;
        position: relative;
        /*top:-1px;*/
        padding-left: 5px;
    }
    .ibox-title .search p{
        border: 1px solid #ccc;
        width: 32px;
        height: 32px;
        line-height: 30px;
        text-align: center;
        color: #ccc;
        border-radius: 3px;
        cursor: pointer;
        font-size: 16px;
        position: relative;
        /*top:-1px;*/
    }
    .searchtype{
        margin-left: 20px;
    }
    .M-box .active, .M-box1 .active, .M-box2 .active, .M-box3 .active, .M-box4 .active{
        background: transparent;
        border: 1px solid #1890ff;
        color: #1890ff;
    }
    .M-box, .M-box1, .M-box2, .M-box3, .M-box4{
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .M-box a:hover,.M-box1 a:hover,.M-box2 a:hover,.M-box3 a:hover,.M-box4 a:hover{
        color:#fff;
        background: #1890ff;
    }
    .M-box a, .M-box1 a, .M-box2 a, .M-box3 a, .M-box4 a{
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 2px;
        border-radius: 2px;
    }
    .M-box .active, .M-box1 .active, .M-box2 .active, .M-box3 .active, .M-box4 .active{
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 2px;
        border-radius: 2px;
    }
</style>
<body>

<div class="row">


    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title clearfix">

                <div class="search fr">
                    <input type="text" placeholder="输入设备名称">
                    <p class="searchbtn fa fa-search"></p>
                </div>

                <div class="searchtype fr">
                    <select name="type" id="type">
                        <option value="">设备名称</option>
                        <option value="">门店名称</option>
                    </select>
                </div>

                <div class="num fr">
                    所在区域：
                    <select name="province" id="sel-provance" onChange="selectCity();">
                        <option value="" selected="true">省/直辖市</option>
                    </select>
                    <select name="city" id="sel-city" onChange="selectcounty(0);">
                        <option value="" selected="true">请选择</option>
                    </select>
                    <select name="dist" id="sel-area">
                        <option value="" selected="true">请选择</option>
                    </select>
                </div>

                <h5>门店订单金额排行2</h5>
            </div>
            <div class="ibox-content">

                <table class="table">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>负责人</th>
                        <th>所属分类</th>
                        <th>所属行业</th>
                        <th>所在区域</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>广州鸿德国际大酒店</td>
                        <td>yang</td>
                        <td>酒店-微阀光，，</td>
                        <td>医院医疗</td>
                        <td>广东省-广州市</td>
                        <td>显示</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>广州鸿德国际大酒店</td>
                        <td>yang</td>
                        <td>酒店-微阀光，，</td>
                        <td>医院医疗</td>
                        <td>广东省-广州市</td>
                        <td>显示</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>广州鸿德国际大酒店</td>
                        <td>yang</td>
                        <td>酒店-微阀光，，</td>
                        <td>医院医疗</td>
                        <td>广东省-广州市</td>
                        <td>显示</td>
                        <td>操作</td>
                    </tr>
                    </tbody>
                </table>
                <div class="M-box2"></div>
            </div>
        </div>
    </div>
</div>

<script>
    cascdeInit();

    $(".M-box2").pagination({
        totalData:100,
        showData:10,
        coping:true
    });
</script>

</body>
</html>